<template>
  <div class="home">
    <nav class="navbar">
      <div class="nav-container">
        <h1 class="logo">泡泡茶壶的个人博客</h1>
        <div class="nav-links">
          <a href="#" class="nav-link active">首页</a>
          <a href="#" class="nav-link">关于</a>
          <a href="#" class="nav-link">联系</a>
        </div>
      </div>
    </nav>

    <main class="main-content">
      <section class="hero">
        <div class="hero-content">
          <img :src="avatar" alt="个人头像" class="avatar" />
          <h2 class="name">泡泡茶壶</h2>
          <p class="bio">茶艺爱好者 | 生活记录者 | 摄影新手</p>
          <p class="intro">热爱泡茶、摄影和记录生活点滴，在这里分享我的茶艺心得和生活感悟。</p>
        </div>
      </section>

      <section class="blog-section">
        <h3 class="section-title">最新文章</h3>
        <div class="articles">
          <article 
            v-for="article in articles" 
            :key="article.id" 
            class="article-card"
          >
            <img :src="article.image" :alt="article.title" class="article-image" />
            <div class="article-content">
              <h4 class="article-title">{{ article.title }}</h4>
              <p class="article-excerpt">{{ article.excerpt }}</p>
              <div class="article-meta">
                <span class="date">{{ article.date }}</span>
                <span class="read-time">{{ article.readTime }}</span>
              </div>
            </div>
          </article>
        </div>
      </section>
    </main>

    <footer class="footer">
      <p>&copy; 2024 泡泡茶壶的个人博客. 保留所有权利.</p>
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const avatar = ref('https://picsum.photos/150/150?random=1')

const articles = ref([
  {
    id: 1,
    title: '乌龙茶的冲泡艺术',
    excerpt: '分享乌龙茶的正确冲泡方法，从水温到时间，每个细节都很重要。',
    date: '2024-01-15',
    readTime: '5 分钟阅读',
    image: 'https://picsum.photos/300/200?random=2'
  },
  {
    id: 2,
    title: '茶具的选择与保养',
    excerpt: '如何挑选适合自己的茶具，以及日常保养的小技巧。',
    date: '2024-01-10',
    readTime: '8 分钟阅读',
    image: 'https://picsum.photos/300/200?random=3'
  },
  {
    id: 3,
    title: '春日茶会记录',
    excerpt: '记录一次美好的春日茶会，与朋友们分享茶香与欢笑。',
    date: '2024-01-05',
    readTime: '6 分钟阅读',
    image: 'https://picsum.photos/300/200?random=4'
  }
])
</script>

<style scoped>
.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.navbar {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  color: #2c3e50;
  font-size: 1.5rem;
  font-weight: 700;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-link {
  text-decoration: none;
  color: #666;
  font-weight: 500;
  transition: color 0.3s;
}

.nav-link:hover,
.nav-link.active {
  color: #3498db;
}

.main-content {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.hero {
  text-align: center;
  padding: 4rem 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 15px;
  margin-bottom: 3rem;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid white;
  margin-bottom: 1rem;
}

.name {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.bio {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.intro {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.1rem;
  opacity: 0.8;
}

.blog-section {
  margin-bottom: 3rem;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #2c3e50;
  text-align: center;
}

.articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.article-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.article-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.article-content {
  padding: 1.5rem;
}

.article-title {
  font-size: 1.3rem;
  margin-bottom: 0.8rem;
  color: #2c3e50;
  line-height: 1.4;
}

.article-excerpt {
  color: #666;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #999;
}

.footer {
  background: #2c3e50;
  color: white;
  text-align: center;
  padding: 2rem;
  margin-top: auto;
}

@media (max-width: 768px) {
  .nav-container {
    padding: 1rem;
  }
  
  .main-content {
    padding: 1rem;
  }
  
  .hero {
    padding: 2rem 1rem;
  }
  
  .name {
    font-size: 2rem;
  }
  
  .articles {
    grid-template-columns: 1fr;
  }
}
</style>